<template>

		<view class="wrapper">
		<view class="tirs">
		
		</view>
	<view class="centers">
	
		<view class="affirm">
			<view class="affirm_info" v-for="(item,index) in numberList" :key='index'>
				<text>{{item.type_name}}</text>
				<text>{{item.price }} SMK</text>
				<view class="name_box">
					<text @tap.stop="minus(index)">-</text> 
					<input type="text" disabled="disabled"  v-model="item.count" class="number"/> 
					<text @tap.stop="puls(index)">+</text>
				</view>
			</view>
		</view>
		<view class="money_box">
			<view class="sum">
				<text>总数</text>
				<text class="numbers">{{sunm}}</text>
			</view>
			<view class="total">
				<text>总价</text>
				<text class="numbers">{{total}} SMK</text>
			</view>
		</view>
		<view class="btn">
			<text @tap="$back()">取消</text>
			<text class="confirm" @tap="confirm">确认</text>
		</view>
	<!-- 	<view class="alert-wrapper center" v-if="flag">
			<view class="kan">
				<text class="ws">是否确认购买</text>
				<view class="coi">
				<text class="f40" @tap="flag =!flag">取消</text>
					<text class="f40" @tap="models">确认</text>
				</view>
			</view>
		</view> -->

	</view>


</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	export default {
		components:{
			uniNavBar
		},
		data(){
			return {
				numberList:[],
				flag:false,
				rightText:"../../static/bizhan/daxing.png"
			}
		},
		onLoad(options) {
		this.numberList	=  JSON.parse(options.list)
		},
		onBackPress(e){
			if(e.from == 'backbutton'){
						this.numberList	= []
						console.log(this.numberList)
			}
	
		},
		onNavigationBarButtonTap(){
				window.location.reload()
		
		},
	
		methods:{
	
			//减
			minus(index){
				if(this.numberList[index].count<= 1){
					return;
				}else {
				this.numberList[index].count--;
				}
			},
			//加
			puls(index){
			this.numberList[index].count++;
			},
		// 	models(){
		// 		this.flag = false
		// 		this.$ajax(
		// 			this.apiList.MineMachinery,
		// 			{
		// 				p:JSON.stringify(this.numberList)
		// 			},
		// 			'POST'
		// 			).then(res=>{
		// 				this.$sToast(res.resultMsg)
		// 		setTimeout(()=> {
		// 				this.$open('/pages/bizhan/ore')
		// 		},1500)
		// 	})	
		// },
			//确认
			confirm(){
				uni.showModal({
					content:'是否确认购买',
					success: (res) => {
						if( res.confirm ){
						this.$ajax(
								this.apiList.MineMachinery,
								{
									p:JSON.stringify(this.numberList)
								},
								'POST'
								).then(res=>{
								this.$sToast(res.resultMsg)
						})	
						}
					}
				})
			},
		
		},
		computed:{
		sunm(){
			let mnub = 0;
			this.numberList.forEach(item=>{
				mnub += parseInt(item.count)
			})
			return mnub;
		},
		total(){
			let total = 0;
			this.numberList.forEach(item=>{
				total += item.count * item.price
			})
			return total.toFixed(2);
		}
		
		}
	}
</script>

<style lang="scss" scoped>
	.centers {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		background-color: #0E1B45;
		padding: 30upx;
		.affirm {
			width: 100%;
			box-sizing: border-box;
			background-color: #0D1D4C;
			border-radius: 10upx;

			.affirm_info {
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1upx solid #DFDFDF;
				text {
					font-size: 34upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ccc;
				}

				.name_box {
					display: flex;
					justify-content: center;
					text {
						display: inline-block;
						width: 56upx;
						height: 56upx;
						border: 1upx solid #20D6D9;
						text-align: center;
						line-height: 56upx;
						color: #20D6D9;
						font-size: 40upx;
						font-weight: bold;
					}

					.number {
						border: 1upx solid rgba(255,255,255,0.3);
						display: inline-block;
						width: 86upx;
						height: 56upx;
						text-align: center;
						line-height: 56upx;
						margin: 0 10upx;
						color: #ccc;
					}
				}
			}

			.affirm_info:last-child {
				border-bottom: none;
			}
		}

		.money_box {
			width: 100%;
			box-sizing: border-box;
			background-color: #0D1D4C;
			border-radius: 10upx;
			margin-top: 30upx;
			.sum {
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				text {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ccc;
				}

				.numbers {
					color: #ccc;
					font-weight: 500;
				}
			}
			.total {
				padding: 30upx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				text {
					font-size: 32upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ccc;
				}
				.numbers {
					color: #cc;
					font-weight: 500;
				}
			}
		}
		.btn {
			width: 100%;
			height: 120upx;
			background-color: #0D1D4C;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			padding: 20upx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			text {
			display: inline-block;
				width: 300upx;
				height: 80upx;
				border: 1upx solid #0297FE;
				font-size:30upx;
				font-family:PingFang SC;
				font-weight:500;
				color: #0297FE;
				box-sizing: border-box;
				text-align: center;
				line-height: 80upx;
				border-radius: 10upx;
			}
			.confirm {
				background-color: #00B34D;
				border: none;
				color: #ccc;
			}
		}
		.alert-wrapper {
			.kan {
				width: 80%;
				height: 20%;
				background-color: #fff;
				border-radius: 10upx;
				.ws {
					display: inline-block;
					display: flex;
					align-items: center;
					text-align: center;
					width: 50%;
					font-size: 50upx;
					margin: 10% auto 0;
					color: #ccc;
				}
				.coi {
					width: 100%;
					border-top: 1upx solid #eee;
					margin: 10% auto 0;
					padding: 0 30upx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					.f40 {
						text-align: center;
						flex: 1;
						display: inline-block;
						padding: 10upx;
						border-right: 1upx solid #eee;
					}
					.f40:last-child {
						border-right: none;
					}
				}
			}
		}
	
	}
</style>
